<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>

<script src="${pageContext.request.contextPath}/jsp/js/jquery-3.1.1.min.js" type="text/javascript" ></script>
<script src="${pageContext.request.contextPath}/jsp/js/bding_jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/jsp/js/highcharts.js"></script>
<!-- 
	自动加载报告能源种类，报告预期值等等，以及年能源总成本。
 -->
<script type="text/javascript">

$(document).ready(function() { 
	var data = "";
	PieChart(data);
	report(data);
});

function report(data) {
	var time ="";
	if(data ==""){
		var time = "2015";
	} else {
		time = document.getElementById('selectTime').value;
	}
	$.ajax({
		data : { time: time },
		dataType : 'html',
		url:'${pageContext.request.contextPath }/reportSummary/selectReport.action',
		success:function(data){
			$("#selectObject").html(data);
		}
	});
}

function selectYear() {
	var time = document.getElementById('selectTime').value;
	$.ajax({
		data : { object: time },
		dataType : 'json',
		url:'${pageContext.request.contextPath }/reportSummary/selectYear.action',
		success : function(data){
			PieChart(data);
		}
	});
}

function PieChart(data) {
	var titles = "";
	var total = [];
	var listType = [];
	var arr = [];
	var costName = "";

	if(data == ""){
		arr = [
			['water',   45.0],
			['electriticy',       26.8],
			{
			   name: 'gas',
			   y: 12.8,
			   sliced: true,
			   selected: true
			},
			['natural_gas',    8.5],
			['fire',     6.2],
			['men',   0.7]
	    ];
	      
	    costName = 'Browser share';
	    titles = '2014 能源总消耗';
	} else {
		alert('你好！='+data);
		titles = data.object +' 能源总成本';
		total = data.total;
		listType = data.listType;
		costName = 'Browser share';
		
		$.each(listType,function(i,item){
			arr.push([listType[i],total[i]]);
		})
	}
	
	/* var chart = {
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false
	};
	var title = {
	   text: titles
	};      
	var tooltip = {
	   pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	};
	var plotOptions = {
	   pie: {
	      allowPointSelect: true,
	      cursor: 'pointer',
	      dataLabels: {
	         enabled: false           
	      },
	      showInLegend: true
	   }
	};
	var series= [{
	   type: 'pie',
	   name: costName ,
	   data: arr
	}];     
	   
	var json = {};   
	json.chart = chart; 
	json.title = title;
	json.tooltip = tooltip;  
	json.series = series;
	json.plotOptions = plotOptions;
	$('#CostManagerHC').highcharts(json);  */	
	var chart = new Highcharts.Chart({
		chart: {
			type: 'pie',
			renderTo: 'CostManagerHC'
		},
		title: {
			text: titles
		},
		credits: {		//版权信息
			enabled: false
		},
		tooltip: {
			pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		},
		series: [{
			type: 'pie',
			   name: costName ,
			   data: arr
			}],     
		plotOptions: {
			pie: {
			      allowPointSelect: true,
			      cursor: 'pointer',
			      dataLabels: {
			         enabled: false           
			      },
			      showInLegend: true
			  }
		}
	});
}
</script>


</head>
<body>
	
	<div id = "select" style="width: 1100px; height: 100px; background-color:white; margin-left:20px;" >
		<div style="line-height: 140px;margin-left: 50px; ">
			<span style="font-size: 23px;">时间：</span><input id ="selectTime" type="text" style="width:150px;height:30px;"/>
			<span style="font-size: 23px;"><input type="button" onclick="selectYear()" value="查询"  style="width:150px;height:30px;"/>
		</div>
	</div>
	<div id="selectObject" style="text-align:center; margin-left:20px; width: 1100px;margin-top: 0.3cm" ></div>
	<div id = "chart" style="background-color:white ;width: 1100px; height: 900px;margin-left:20px; margin-top: 0.1cm" >
		<input type="button" value="查看详情" style="width:150px;height:30px; margin: 20px 30px 0px 0px; float:right;"/>
		<div id="CostManagerHC" style="background-color:#D3D3D3; width: 700px; height: 600px; margin: 0 auto; margin: 20px 30px 30px 20px;"></div>
	</div>
	
</body>
</html>